@import './source.scss';

.firstpage {
    background-image: url('../img/img1.jpg');
    background-size: cover;
    background-position: center;
}

.title-text {
    margin-top: 70vh;
    padding: 10vh 10% 0 10%;
    height: 20vh;
    color: #fff;
    background-color: rgba($color: #000, $alpha: .4);
    font-family: "Microsoft YaHei";


    @media(max-width: $media-screen-width) {
        height: 25vh;
        padding: 5vh 5% 0 5%;
    }

    >h1 {
        font-size: 42px;
        letter-spacing: .2em;
        font-weight: 400;
        line-height: 1.5em;

        @media(max-width: $media-screen-width) {
            font-size: 32px;
        }

        @media(max-width: $max-screen-width) {
            font-size: 35px;
        }
    }

    >h2 {
        padding-top: .3em;
        font-weight: 400;
        font-size: 22px;
        line-height: 1.5em;
        letter-spacing: .2em;

        @media(max-width: $media-screen-width) {
            font-size: 18px;
        }
    }
}

.circle {
    float: left;

    >span {
        display: inline-block;
        width: 13px;
        height: 13px;
        background-color: #fff;
        border-radius: 100%;
        margin-right: .4em;

        &:nth-child(1) {
            background-color: #ff493f;
        }

        &:nth-child(2) {
            background-color: #f7c900;
        }

        &:nth-child(3) {
            background-color: #00ff37;
        }
    }
}